<?php require_once '../conn/DBconnect.php';?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Color Manila Run - Search</title>
<link rel="stylesheet" href="../styles/layout.css" type="text/css" media="screen"/>
<script src="../scripts/jquery-1.8.2.js"></script>
<script src="../scripts/jquery.format.1.05.js"></script>
<script src="../scripts/preloadercontrol.js"></script>

</head>
<body marginheight="0" marginwidth="0">
<div id="preloader"><div><img src="../images/ajax-loader.gif" width="50" height="50"/></div></div>
<div id="mainContainer">
	<div id="div-header">
		<div class="div-header-title">
			<div class="dh-title-left"></div>
			<div class="dh-title-center">Search Record</div>
			<div class="dh-title-right"></div>
		</div>
	</div>
	<div id="div-content">
		<div class="formItem" style="vertical-align:middle">
			<div class="formLabelRight" style="padding-top: 14px;"><b>Keyword </b></div>
			<div style="padding-top: 10px;"><input type="text" name="keywordString" maxlength="50" style="width:200px;"/></div>
			<div class="formButtonMenu">
				<div class="blue-buttonBL"></div>
				<div id="btnContinue" class="blue-buttonM">
					<a href="javascript:executeSearch()">Search</a>
				</div>
				<div class="blue-buttonBR"></div>
			</div>
		</div>
		<div class="divSpacer"></div>
		<div style="margin: 10px;"><hr></div>
		<div class="divSpacer"></div>
	</div>
	<div class="formItem">
		<div id="searchResult"></div>
	</div>
</div>
</body>

<script type="text/javascript">

$("#preloader").css({ opacity: 0.5 });
showPreloader(false);

function executeSearch()
{
	showPreloader(true);
	var paramObj = {};
	
	paramObj.keyword = $("#mainContainer").find( 'input[name="keywordString"]' ).val();
	$.post('search.php', paramObj, function(data) {
    	$( "#searchResult" ).empty().append( data );
    	showPreloader(false);
    });
}

</script>
</html>